<template>
  <FoldBox>
    <template #bd>
      <a-row style="margin-top: 8px">
        <a-col :span="6">半径</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            v-model:value="dataConfig.radius"
            :max="1"
            :min="0.01"
            :step="0.01"
            size="small"
            @change="change"
          />
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">线条平滑</a-col>
        <a-col :span="18" style="text-align: right">
          <a-switch v-model:checked="dataConfig.smooth" @change="change" size="small" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 8px">
        <a-col :span="6">线宽度</a-col>
        <a-col :span="18" style="text-align: right">
          <a-input-number
            size="small"
            :min="1"
            v-model:value="dataConfig.lineStyle.lineWidth"
            @change="change"
            label="数字"
          />
        </a-col>
      </a-row>
      <!-- <a-row style="margin-top:8px">
        <a-col :span="6">面积</a-col>
        <a-col :span="18" style="text-align:right">
          <a-switch size="small" />
        </a-col>
      </a-row> -->
    </template>
  </FoldBox>
</template>
<script>
  import FoldBox from '../_source/foldBox.vue';
  import { cloneDeep } from 'lodash';

  export default {
    components: { FoldBox },
    props: {
      config: {
        type: Object,
      },
    },
    setup() {},
    data() {
      return {
        dataConfig: {},
      };
    },
    created() {
      this.init();
    },

    methods: {
      init() {
        this.dataConfig = cloneDeep(this.config);
      },

      change() {
        this.$emit('change', this.dataConfig);
      },
    },
  };
</script>
